<script setup lang="ts">
import { ElMessageBox, ElTag } from 'element-plus';
import { reactive, toRefs, computed } from 'vue';
import type { TagProps } from 'element-plus';
import { DefaultService as Api } from '@/servers';
import { TableController } from '@/components/core/dynamic-table';
import { ItemType, resultOptions, useTable } from '@/components/core/dynamic-table/helper';
import { message } from '@/components/basic/message';

interface TagsItem {
  id: number;
  name: string;
  type: TagProps['type'];
}

const base = reactive({
  query: 'getRoleActionList',
  data: [],
  Params: ['page', 'size'],
  sort: (a: ItemType, b: ItemType): number => a.id - b.id,
  page: 1,
  size: 14,
  total: 0,
  qForm: {
    // queryForm
    model: 'Plan',
    cid: '',
    status: '',
    keyword: '',
    sort: 0
  },
  form: {}
});

const tableState = reactive({ ...useTable(base), ...toRefs(base) }) as resultOptions;
const colors = ['primary', 'success', 'info', 'warning', 'danger'];
const tags = computed<TagsItem[]>(() => {
  const result = tableState.data.map((item, index) => ({
    id: item.id,
    name: item.action_name,
    type: colors[index % 5]
  })) as TagsItem[];
  return result || [];
});

const addItem = () => {
  ElMessageBox.prompt('please input action name', 'tip', {
    confirmButtonText: 'confirm',
    cancelButtonText: 'cancel',
    inputPattern: /\S/,
    inputErrorMessage: 'action name can not be empty'
  })
    .then(async ({ value }) => {
      message.loading();
      await Api.postRoleActionEdit({ action_name: value });
      tableState.fetchData?.();
      message.destroy();
    })
    .catch(() => {
      message.info({
        type: 'info',
        message: 'cancel add'
      });
    });
};

const deleteItem = (tag: TagsItem) => {
  ElMessageBox.confirm('sure to delete this item?', 'tip', {
    confirmButtonText: 'confirm',
    cancelButtonText: 'cancel',
    type: 'warning'
  })
    .then(async () => {
      message.loading();
      await Api.postRoleActionDelete([String(tag.id)]);
      tableState.fetchData?.();
      message.destroy();
    })
    .catch(() => {
      message.info({
        type: 'info',
        message: '取消删除'
      });
    });
};
</script>
<template>
  <div class="wh-full flex flex-col box-border pb-2">
    <TableController>
      <template #left>
        <div class="flex">
          <div class="font-size-14px w-100px">行动项：</div>
          <div class="w-600px flex flex-row flex-wrap gap-2">
            <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" @close="deleteItem(tag)">
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
      </template>
    </TableController>
    <TableController>
      <template #left>
        <div class="flex">
          <div class="font-size-14px w-100px"></div>
          <a-button type="primary" size="small" @click="addItem">Add</a-button>
        </div>
      </template>
    </TableController>
  </div>
</template>

<style lang="scss" scoped></style>
